<template>
  <view id="IdentifyTableID">
    <view class="littleTitle">
      <TableTitle :title="'识别数据内容'" @click="clearData"></TableTitle>
      <!-- <button style="height: 100px; width: 100px" ></button> -->
    </view>
    <view class="tableContentClass">
      <uni-table>
        <uni-tr>
          <uni-td align="center">
            <view class="tdClass"> 验证<br />识别 </view>
          </uni-td>
          <uni-td align="center" style="color: #fff !important">
            <view class="tdClass"
              ><span v-if="data">{{ data.code }}</span>
            </view>
          </uni-td>
          <uni-td align="center">
            <!-- <view class="tdClass">
              <view class="col3Class">时间</view>
              <view class="col3Class"
                ><span v-if="data"
                  >{{ data.product_date.split(' ')[0].split('-')[0]
                  }}{{ data.product_date.split(' ')[0].split('-')[1]
                  }}{{ data.product_date.split(' ')[0].split('-')[2] }}</span
                >
                <span v-else></span>
              </view>
              <view class="col3Class"
                ><span v-if="data">{{ data.product_date.split(' ')[1] }}</span> <span v-else></span
              ></view>
            </view> -->
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <!-- <view class="textContentClass">
      <span
        >温馨提示:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
          v-if="data"
          >已被查询{{ data.count }}次</span
        ></span
      >
    </view> -->
    <view class="dataContentClass">
      <view class="boxClass">
        <!-- <view class="detailClass"><span v-if="data">"伊利纯牛奶"</span></view> -->
        <!-- <view class="detailClass"><span v-if="data">茅台</span></view> -->
        <view class="detailClass"><span v-if="data">农夫山泉</span></view>
        <view class="titleClass">品牌</view>
      </view>
      <view class="boxClass">
        <view class="detailClass">
          <span v-if="data">19L</span>
        </view>
        <view class="titleClass">规格</view>
      </view>
      <view class="boxClass">
        <view class="detailClass">
          <span v-if="data">广东河源市万绿湖</span>
        </view>
        <view class="titleClass">水源地址</view>
      </view>
      <view class="boxClass">
        <view class="detailClass"><span v-if="data">浙江省杭州市西湖区</span></view>
        <view class="titleClass">厂家地址</view>
      </view>
      <view class="boxClass">
        <view class="detailClass">
          <!-- <span v-if="1"> 2024-10-10<br />剩180天 23时50分20秒<template></template> </span> -->
          <!-- <span v-if="data">面漆</span> -->
          <span v-if="data">{{ data.wtime.split(' ')[0] }}<br /> </span>
          <!-- <template v-if="data">剩{{ timeFunc(data.product_date) }}</template> -->
          <!-- <template v-else>已过保质期</template> -->
          <!-- <span v-if="data"></span>
          <span v-if="data">鞋子</span> -->
        </view>
        <view class="titleClass">生产日期</view>
      </view>
      <!-- <view class="boxClass">
        <view class="detailClass"><span v-if="data">广州市晶迎皮具有限公司</span></view>
        <view class="titleClass">厂家名称</view>
      </view> -->

      <view class="boxClass">
        <view class="detailClass"><span v-if="data">广东省佛山市顺德区</span></view>
        <view class="titleClass">销售定向</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import TableTitle from '../TableTitle/TableTitle.vue'
import { useyanZhengStore } from '@/stores/modules/yanZheng'
import { formatDate, timeNumber, timeDiff } from '@/utils/days'
const yanZhengStore = useyanZhengStore()
const data = ref()

watch(
  () => yanZhengStore.data,
  () => {
    data.value = yanZhengStore.data
    console.log(data.value)
  },
)

const timer = ref()
const date = ref()

function timeFunc(time: string | number | Date) {
  date.value = timeDiff(timeNumber(time) + +1000 * 60 * 60 * 24 * 180 - Date.now())
  return date.value
}

const clearData = () => {
  console.log('清空了')
  data.value = null
}
onMounted(() => {})
</script>

<style lang="scss" scoped>
#IdentifyTableID {
  height: 85vh;
  width: 30vw;
  background: url('../../static/images/Large_Content_Box.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 0 1.3vw;
  margin-top: 10px;

  .tableContentClass {
    width: 100%;
    margin-top: 35px;
    background: #0000;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep(.uni-table) {
      width: 27.4vw;
      background-color: #fff0 !important;
      height: 12.4vh; //93.93px
      background: url('../../static/images/Large_Content_Box.png') no-repeat;
      // background: url('../../static/images/Verification_identification.png') no-repeat;
      background-size: 100% 100%;
      background-position: calc(50%);

      .uni-table-tr {
        // margin: 5px 0 !important;
        width: 27.4vw;
        .uni-table-th,
        .uni-table-td {
          color: #0ff !important;
          border: none !important;
          box-sizing: border-box;
          margin: 0.5vw 0 !important;
          padding: 0 !important;
          font-size: 2vh !important;
        }

        .uni-table-td {
          &:nth-child(1) {
            width: calc(27.4vw * 0.142) !important;
            .tdClass {
              width: calc(27.4vw * 0.142) !important;
              height: 12.4vh; //93.93px
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          &:nth-child(2) {
            //
            font-size: 1.6vh !important;
            width: calc(27.4vw * (1 - 0.142 - 0.138)) !important;
            .tdClass {
              height: 12.4vh; //93.93px
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
          // &:nth-child(3) {
          //   // background: #000;
          //   width: calc(30vw * 0.138) !important;
          //   .tdClass {
          //     height: 12.4vh;
          //     .col3Class {
          //       &:nth-child(1) {
          //         margin-top: 0.2vh;
          //         height: calc(12.4vh * 0.45) !important;
          //         display: flex;
          //         justify-content: center;
          //         align-items: center;
          //       }
          //       &:nth-child(2) {
          //         font-size: 1.3vh;
          //         height: calc(12.4vh * 0.2525) !important;
          //         display: flex;
          //         justify-content: center;
          //         align-items: center;
          //       }
          //       &:nth-child(3) {
          //         height: calc(12.4vh * 0.2525) !important;
          //         // background: #af2a2a;
          //         font-size: 1.3vh;
          //         display: flex;
          //         justify-content: center;
          //         align-items: center;
          //       }
          //     }
          //   }
          // }
        }
      }

      .uni-table-loading {
        display: none !important;
      }
    }
  }

  // .textContentClass {
  //   margin-top: 8px;
  //   height: 39.73px;
  //   background: url('../../static/images/Small_content_box.png') no-repeat;
  //   background-size: 100% auto;
  //   display: flex;
  //   justify-content: left;
  //   align-items: center;
  //   padding: 0 40px;

  //   span {
  //     color: red;
  //   }
  // }

  .dataContentClass {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    columns: 3;

    .boxClass {
      // margin: 0 1.5625vw; // 间隙为5px
      margin-top: 2vh;
      width: calc(8.269271vw * 1.6);
      height: calc(17.65463vh * 1.2);
      background: url('../../static/images/Data_decoration.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 2vh;
      // &:nth-child(3n) {
      //   // 去除第3n个的margin-right
      //   margin-right: 0;
      // }

      .detailClass {
        white-space: normal;
        width: calc(8.269271vw * 1.6);
        height: calc(6.666667vh * 1.2);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
        color: #fff;
        // padding: 0 0.925926vh;
        margin-top: 1.44vh;
        // border: 1px solid #312532;
        box-sizing: border-box;

        span {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          white-space: normal;
          width: calc(8.269271vw * 1.5);
          height: calc(6.666667vh * 1.2);
          // flex-direction: row;
        }
      }

      .titleClass {
        color: #0ff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(6.666667vh * 1.2);
        // border: 1px solid #312532;
        box-sizing: border-box;
      }
    }
  }
}
</style>
